<template>
	<view>
		<!-- 顶部的tab -->
		<view class="tab">
			<view class="tab-item" 
			v-for="(item, index) in ['全部', '待付款', '待发货']"
			:key="index"
			@click="handleTab(index)"
			:class="{active: current === index}">
				{{item}}
			</view>
		</view>
		
		<view class="order-list" v-if="orders.length">
			<view class="order-item"
			v-for="(item, index) in orders"
			:key="index">
				<view class="order-content">
					<text>订单编号</text>
					<span>{{item.order_number}}</span>
				</view>
				<view class="order-content">
					<text>订单金额</text>
					<span class="colorRed">￥ {{item.order_price}}</span>
				</view>
				<view class="order-content">
					<text>订单日期</text>
					<span>{{ formatTime( new Date(item.create_time) ) }}</span>
				</view>
			</view>
		</view>
		
		<view class="order-empty" v-else>
			暂无订单
		</view>
	</view>
</template>

<script>
	import {formatTime} from "../../utils/utils.js"
	
	export default {
		data() {
			return {
				// 当前高亮的索引
				current: 0,
				// 订单列表
				orders: [],
				token: "",
				formatTime
			}
		},
		methods: {
			//  点击tab栏的事件
			handleTab(index) {
				this.current = index;
				
				// 请求订单数据
				this.getList();
			},
			
			// 请求订单数据
			getList(){
				// 请求订单列表
				uni.request({
					url: "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all",
					header: {
						Authorization: this.token
					},
					data: {
						type: this.current + 1
					},
					success: res => {
						const {orders} = res.data.message;
						
						this.orders = orders;
					}
				})
			}
		},
		onLoad(){
			const token = uni.getStorageSync("token");
			// 没有登录就跳转到登录页
			if(!token){
				uni.navigateTo({
					url: "/pages/auth/index"
				})
			}
			
			// 把token保存到data
			this.token = token;
			
			// 请求订单数据
			this.getList();
		}
	}
</script>

<style lang="less">
.tab{
	display: flex;
	padding: 0 30rpx;
	justify-content: space-between;
	height: 88rpx;
	line-height: 88rpx;
	border-bottom: 1px #eee solid;
	
	.tab-item {
		padding: 0 30rpx;
		font-size: 14px;
		border-bottom: 1px #fff solid;
	}
	
	.active{
		border-bottom-color: red;
		font-weight: 600;
	}
}

.order-item{
	padding: 20rpx;
	border-bottom: 10px #eee solid;
	
	.order-content{
		display: flex;
		margin-bottom: 20rpx;
		justify-content: space-between;
		font-size: 14px;
	}
	
	.colorRed {
		color: red;
	}
}

.order-empty{
	font-size: 14px;
	color: #999;
	text-align: center;
	margin-top: 200rpx;
}
</style>
